<template>
  <div>
    <el-aside style="width: 260px;z-index: 80">
      <el-scrollbar style="height: 100%">
        <router-link to="/indexPage" class="a_title">网站指南</router-link>
        <br>
        <a class="a_title">更新日志</a><br>
        <a class="a_title">Element React</a><br>
        <a class="a_title">Element Angular</a><br><br>
        <a class="a_title">开发指南</a><br>
        <router-link to="/test">测试</router-link>
        <br>
        <router-link to="/test">测试</router-link>
        <br>
        <router-link to="/el_anzhuang">安装</router-link>
        <br>
        <router-link to="/el_daimagaoliang">代码高亮显示</router-link>
        <br>
        <router-link to="/el_MavonEditor">MavonEditor 富文本编辑器</router-link>
        <br>
        <router-link to="/el_quickstar">快速上手</router-link>
        <br>
        <router-link to="/">国际化</router-link>
        <br>
        <router-link to="/">自定义主题</router-link>
        <br>
        <router-link to="/">内置过渡动画</router-link>
        <br><br>
        <a class="a_title">组件</a><br>
        <!--basic-->
        <div class="nav-group__title">Basic</div>
        <router-link to="/elLayout">Layout 布局</router-link>
        <br>
        <router-link to="/">Container 布局容器</router-link>
        <br>
        <router-link to="/">Color 色彩</router-link>
        <br>
        <router-link to="/">Typography 字体</router-link>
        <br>
        <router-link to="/">Border 边框</router-link>
        <br>
        <router-link to="/">Icon 图标</router-link>
        <br>
        <router-link to="/">Button 按钮</router-link>
        <br>
        <router-link to="/">Link 文字链接</router-link>
        <br>
        <!--form-->
        <div class="nav-group__title">From</div>
        <router-link to="/">Radio 单选框</router-link>
        <br>
        <router-link to="/">Checkbox 多选框</router-link>
        <br>
        <router-link to="/">Input 输入框</router-link>
        <br>
        <router-link to="/">InputNumber 计数器</router-link>
        <br>
        <router-link to="/">¶Select 选择器</router-link>
        <br>
        <router-link to="/">Cascader 级联选择器</router-link>
        <br>
        <router-link to="/">Switch 开关</router-link>
        <br>
        <router-link to="/">Slider 滑块</router-link>
        <br>
        <router-link to="/">TimePicker 时间选择器</router-link>
        <br>
        <router-link to="/">DatePicker 日期选择器</router-link>
        <br>
        <router-link to="/">DateTimePicker 日期时间选择器</router-link>
        <br>
        <router-link to="/">Upload 上传</router-link>
        <br>
        <router-link to="/">Rate 评分</router-link>
        <br>
        <router-link to="/">ColorPicker 颜色选择器</router-link>
        <br>
        <router-link to="/">¶Transfer 穿梭框</router-link>
        <br>
        <router-link to="/">Form 表单</router-link>
        <br>
        <!--Data-->
        <div class="nav-group__title">Data</div>
        <router-link to="/">Table 表格</router-link>
        <br>
        <router-link to="/">Tag 标签</router-link>
        <br>
        <router-link to="/">Progress 进度条</router-link>
        <br>
        <router-link to="/">Tree 树形控件</router-link>
        <br>
        <router-link to="/">Pagination 分页</router-link>
        <br>
        <router-link to="/">Badge 标记</router-link>
        <br>
        <router-link to="/">Avatar 头像</router-link>
        <br>
        <!--Notice-->
        <div class="nav-group__title">Notice</div>
        <router-link to="/">Alert 警告</router-link>
        <br>
        <router-link to="/">¶Loading 加载</router-link>
        <br>
        <router-link to="/">Message 消息提示</router-link>
        <br>
        <router-link to="/">MessageBox 弹框</router-link>
        <br>
        <router-link to="/">Notification 通知</router-link>
        <br>
        <!--Navigation-->
        <div class="nav-group__title">Navigation</div>
        <router-link to="/">NavMenu 导航菜单</router-link>
        <br>
        <router-link to="/">Tabs 标签页</router-link>
        <br>
        <router-link to="/">Breadcrumb 面包屑</router-link>
        <br>
        <router-link to="/">PageHeader 页头</router-link>
        <br>
        <router-link to="/">¶Dropdown 下拉菜单</router-link>
        <br>
        <router-link to="/">Steps 步骤条</router-link>
        <br>
        <!--Others-->
        <div class="nav-group__title">Others</div>
        <router-link to="/">Dialog 对话框</router-link>
        <br>
        <router-link to="/">Tooltip 文字提示</router-link>
        <br>
        <router-link to="/">Popover 弹出框</router-link>
        <br>
        <router-link to="/">Popconfirm 气泡确认框</router-link>
        <br>
        <router-link to="/">Card 卡片</router-link>
        <br>
        <router-link to="/">Carousel 走马灯</router-link>
        <br>
        <router-link to="/">Collapse 折叠面板</router-link>
        <br>
        <router-link to="/">Timeline 时间线</router-link>
        <br>
        <router-link to="/">Divider 分割线</router-link>
        <br>
        <router-link to="/">Calendar 日历</router-link>
        <br>
        <router-link to="/">Image 图片</router-link>
        <br>
        <router-link to="/">Backtop 回到顶部</router-link>
        <br>
        <router-link to="/">InfiniteScroll 无限滚动</router-link>
        <br>
        <router-link to="/">Drawer 抽屉</router-link>
        <br><br> <br><br>
      </el-scrollbar>
    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </div>
</template>

<script>
  export default {
    name: 'Page_container_main'
  }
</script>

<style scoped>
  .position_main {
    position: relative;
  }

  .el-row {
    /*margin-bottom: 20px;*/
    /*&:last-child {*/
    /*margin-bottom: 0;*/
    /*}*/
    height: 100%;
    position: relative;
    /*background-color: pink;*/
  }

  .el-col {
    /*background-color: red;*/
    height: 100%;
  }

  /*body > .el-container {*/
  /*margin-bottom: 40px;*/
  /*}*/

  /*滚动条*/
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-aside {
    padding-left: 20px;
    color: #333;
    text-align: left;
    line-height: 35px;
    height: 100%;
    border-right: 1px solid #eee;
    overflow: -moz-hidde-unscrollable;
    overflow-x: auto;
    position: fixed;
    /*background-color: deepskyblue;*/
  }

  .el-main {
    color: #333;
    height:calc(100% - 80px);
    /*width: 100%;*/
    text-align: left;
    /*border: red solid 1px;*/
    padding-left: 270px;
    /*background-color: burlywood;*/
    /*解决main定位问题*/
    overflow: hidden;
    position: relative;
  }

  a {
    text-decoration: none;
    color: #444444;
    font-size: 14px;
  }

  a:hover {
    color: #409eff;
  }

  a:active {
    color: red;
  }

  /*标题样式*/
  .a_title {
    font-size: 16px;
    color: #333;
    font-weight: 700;
  }

  .nav-group__title {
    font-size: 12px;
    color: #999;
    line-height: 26px;
    margin-top: 15px;
  }


</style>
